Menu
Tailwind CSS

Instailling Tailwind

Installation of Tailwind

 

Step 1: Install Tailwind CSS via npm
 

First Install Node.js on Your Computer, for windows. Click on this link https://nodejs.org/en/download/. Here install the LTS version . Once downloaded open NodeJS without disturbing other settings, click on the Next ,Next button until it’s completely installed.

Now, Open command prompt to check whether it is completely installed or not.
Run Below command
 

node -v

 

Now, Navigate to your project directory in the terminal and running the following command:

npm install -D tailwindcss

The -D means that you’re installing the Tailwind CSS package as a dev dependency.

 

Step 2: Generating Tailwind Config File
 

npm tailwindcss init

This will generate ‘tailwind.config.js’ file in your project root directory.


Replace the content of `tailwind.config.js` file with the given below code:

module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
    extend: {},
},
plugins: [],
};

 

Step 3: Adding Tailwind to project CSS

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Add it to your project css file(style.css).

 

Step 4: Process your project with Tailwind CSS

"scripts": {
    "build": "tailwindcss -i src/styles.css -o dist/styles.css"
}

Adding a build script to your project file name ‘package.json’

 

Step 5: Basic Tailwind layout using Tailwind CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Layout with Tailwind CSS</title>
    <link href="style.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4">
        <!-- Header -->
        <header class="py-4">
            <h1 class="text-3xl font-bold text-center text-gray-800">Welcome to Tailwind CSS</h1>
        </header>

        <!-- Navigation -->
        <nav class="flex justify-center mb-8">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-blue-500 hover:text-blue-700">Home</a></li>
                <li><a href="#" class="text-blue-500 hover:text-blue-700">Services</a></li>
                <li><a href="#" class="text-blue-500 hover:text-blue-700">Contact</a></li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main>
            <div class="bg-white p-8 shadow-md rounded-lg">
                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Main Content Area</h2>
                <p class="text-gray-700">This is a basic layout created using Tailwind CSS.</p>
            </div>
        </main>

        <!-- Footer -->
        <footer class="mt-8 py-4 border-t border-gray-300 text-center text-gray-700">
            <p>&copy; 2024 Tailwind CSS. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

 

 

Tailwind CSS